<template>
  <div class="detail">
      <h1>{{list.game}}购买清单</h1>
      <div class="ord_detail">
        <div class="left">
          <p>订单编号：{{list.ord_num}}</p>
          <p>收货人员：{{list.username}}</p>
          <p>收货地址：{{list.area}}</p>
        </div>
        <div>
          <p>订购时间：{{list.pay_time}}</p>
          <p>联系电话：{{list.tel}}</p>
        </div>
      </div>
      <div class="logistics">
        <p class="log_titile">订单信息</p>.
        <table>
          <tr>
            <th>商品编号</th>
            <th>商品名称</th>
            <th>商品规格</th>
            <th>商品数量</th>
            <th>单价(元)</th>
            <th>优惠(元)</th>
            <th>小计(元)</th>
          </tr>
          <tbody>
            <tr>
              <td>{{list.game}}</td>
              <td>{{list.ord_num}}</td>
              <td>{{list.game_area}}</td>
              <td>{{list.num}}</td>
              <td>{{list.price}}</td>
              <td></td>
              <td>{{list.price*list.num}}</td>
            </tr>
            <tr>
              <td colspan="7">
                <span class="allnum">总数量：{{list.num}}件</span> 
                <span>商品总金额：{{list.price*list.num}}元</span> 
              </td>
            </tr>
          </tbody>
        </table>
        <div class="order_num">
            <p>
              <img id="barcode" />
            </p>
        </div>
        <div class="remarks">
          <p>备注信息:</p>
          <div class="msg"></div>
        </div>
      </div>
    </div>
</template>

<script>
import JsBarcode from 'jsbarcode'
export default {
  props:['list'],
  mounted() {
    setTimeout(() => {
      JsBarcode('#barcode', this.list.ord_num, {
      format: 'CODE39',
      width: 2, 
      height: 40,
      displayValue: true
    })
    }, 0);
  },
}
</script>

<style>
.detail {
  width: 95%;
  box-sizing: border-box;
  padding: 20px;
  border: 2px dashed lightgray;
  font-size: 14px;
  background: white;
}
h1{
  font-weight: 400;
  text-align: center;
  margin: 20px 0;
}
.ord_detail{
  display: flex;
  line-height: 30px;
}
.left{
  width: 70%;
}
.log_titile{
  margin: 20px 0;
  border-bottom: 1px solid lightgray;
  padding-bottom: 20px;
}
table{
  width: 100%;
  border: 1px solid lightgray;
  border-collapse: collapse;
}
th,td{
  border: 1px solid lightgray;
  text-align: center;
  line-height: 30px;
}
.allnum{
  margin: 0 2% 0 72%;
}
.order_num{
  width: 100%;
  text-align: right;
}
.bar_num{
  margin-top: 10px;
  font-weight: bold;
}
.remarks{
  width: 100%;
  margin: 30px 0;
}
.msg{
  margin-top: 10px;
  border: 1px solid lightgray;
  padding: 24px 0;
}
</style>